﻿var $placeHolderId = 'imgPlaceHolder1';
var $lastSelectedVeName = null;
var $isProcessing = false;
var $timeout = 120;
var $timeoutID = null;
var $originalUrl = null;

Sys.Application.add_load(onLoad);

function onLoad(sender, e) {
	Sys.Application.remove_load(onLoad);

    $originalUrl = $get($imgId).src;

    for (var i = 0; i < $buttons.length; i++) {
    	hookEvent($buttons[i]);
    }
}

function hookEvent(name) {
    var element = $get(name);
    $addHandler(element, 'mouseover', onMouseOver);
    $addHandler(element, 'mousedown', onMouseDown);
    $addHandler(element, 'click', onClick);
    $addHandler(element, 'mouseout', onMouseOut);
}

function onMouseOver(e) {
    if ($isProcessing) { return; }
    e.target.style.backgroundColor = 'silver';
}

function onMouseDown(e) {
    if ($isProcessing) { return; }
    e.target.style.backgroundColor = 'gray';
}

function onClick(e) {
    if ($isProcessing) { return; }
    $isProcessing = true;

    $get('btnVeSave').disabled = true;
    $get('btnVeSaveAs').disabled = true;

    restoreLastSelectedVeItem();
    
    $clearHandlers(e.target);
    $lastSelectedVeName = e.target.id;
    applyVE(e.target.id);
    e.target.style.backgroundColor = 'silver';
}

function onMouseOut(e) {
    e.target.style.backgroundColor = '';
}

function applyVE(name) {
	var newUrl = String.format($urlFormat, name);
    if (newUrl) { switchImage(newUrl); }
}

function switchImage(newUrl) {
    var img = $get($imgId);
    if (img.src.endsWith(newUrl)) { return; }

    var text = 'Processing...';
    var element = document.createElement('div');
    var bounds = Sys.UI.DomElement.getBounds(img);
    element.id = $placeHolderId;
    element.style.width = bounds.width + 'px';
    element.style.height = bounds.height + 'px';
    element.style.textAlign = 'center';
    element.innerHTML = '<img src="progress.gif" alt="" class="progressItem"><span class="progressItem">' + text + '</span>';
    element.style.lineHeight = bounds.height + 'px';
    img.style.display = 'none';
    img.parentNode.appendChild(element);

    $addHandler(img, 'load', hideProgressPlaceHolder);
    img.src = newUrl + '&rn=' + Math.random();

    $timeoutID = setTimeout('timeoutHandler()', $timeout * 1000);
}

function hideProgressPlaceHolder() {
    if ($timeoutID) {
        clearTimeout($timeoutID);
        $timeoutID = null;
    }
    var holder = $get($placeHolderId);
    if (!holder) { return; }

    var img = $get($imgId);
    if (!img) { return; }
    
    $clearHandlers(img);
    holder.parentNode.removeChild(holder);
    img.style.display = '';
    $isProcessing = false;

    $get('btnVeSave').disabled = false;
    $get('btnVeSaveAs').disabled = false;
}

function restoreLastSelectedVeItem() {
    if ($lastSelectedVeName) {
        $get($lastSelectedVeName).style.backgroundColor = '';
        hookEvent($lastSelectedVeName);
    }
}

function timeoutHandler() {
    //alert('timeout!');
    restoreLastSelectedVeItem();
    $get($imgId).src = $originalUrl;
    hideProgressPlaceHolder();
    $isProcessing = false;

    $get('btnVeSave').disabled = true;
    $get('btnVeSaveAs').disabled = true;
}